import React from "react";
import axios from "axios";
import "./App.scss";


class App extends React.Component {
  state = {
    image: "",
    tabs: [],
    activeIndex: -1,
  };
  handleClick(i) {
    const { activeIndex } = this.state;
    this.setState({
      activeIndex: i === activeIndex ? -1 : i,
    });
  }
  render() {
    const { image, tabs, activeIndex } = this.state;
    return (
      <div>
        <ul className="tabs">
          {tabs.map((v, i) => {
            return (
              <li
                key={i}
                className="tabs-title"
                onClick={() => this.handleClick(i)}
              >
                <span className="count">{v.count}</span>
                <span className="title">{v.title}</span>
                <ol style={{ display: i === activeIndex ? "block" : "none" }}>
                  {v.children.map((v, i) => {
                    return <li key={i}>{v.title}</li>;
                  })}
                </ol>
              </li>
            );
          })}
        </ul>
        <img src={image} alt="" />
      </div>
    );
  }
  componentDidMount() {
    axios.get("/tabs").then((resp) => {
      this.setState({
        tabs: resp.data.data,
      });
    });

     axios.get("/image").then((resp) => {
      this.setState({
        image: resp.data.data,
      });
    });
  }
}

export default App;
